<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax</title>
    <style>
        div {
            width: 1335px;
            height: 470px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div><img src="/DrawServlet" /></div>
<p id="content">胖子对小男孩说：1945年8月15日日本宣布投降，二战结束</p>
<button id="btn">点我更新正文</button>
</body>
<script>
    let btnEle = document.getElementById("btn");
    let contentEle = document.getElementById("content");
    btnEle.onclick = function (){

        // 1、创建 XMLHttpRequest 对象
        let xmlHttpRequest = new XMLHttpRequest();

        // 2、监听 XMLHttpRequest 对象状态改变
        xmlHttpRequest.onreadystatechange = function (){
            // 3、当 XMLHttpRequest 对象状态变成 4 表示接收到了服务器端响应
            // status 响应状态码为 200 时表示服务器处理请求成功
            // 两个条件都满足时接收服务器端返回的数据
            if (xmlHttpRequest.readyState === 4 && xmlHttpRequest.status === 200){
                // 4、xmlHttpRequest.responseText 是响应体
                contentEle.innerText = xmlHttpRequest.responseText;
            }
        };

        // 3、设置请求方式和请求目标地址
        xmlHttpRequest.open("GET", "/AjaxDataServlet");

        // 4、发送请求
        xmlHttpRequest.send();
    };
</script>
</html>
